<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
  >
    <a-form-model ref="ruleForm" :model="form" layout="horizontal" :rules="rules">
      <a-row :gutter="24">
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="进程" prop="followup">
            <j-dict-select-tag type="list" v-model="form.followup" dictCode="customer_process" placeholder="请选择进程"/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="跟进日期" prop="followup_date">
            <JDate valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="form.followup_date" style="width:100%;" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="计划下次跟进时间" prop="plan_followup_date">
            <JDate valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="form.plan_followup_date" style="width:100%;" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="沟通方式" prop="communicate_type">
            <j-dict-select-tag type="list" v-model="form.communicate_type"  dictCode="communicate_type" placeholder="请选择沟通方式"/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="客户联系人">
            <a-input type="list" v-model="form.customer_contacts" placeholder="请选择客户联系人"/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="意向等级">
            <j-dict-select-tag type="list" v-model="form.customer_intention" dictCode="customer_intention"/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="成交几率">
            <a-slider v-model="form.probability" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="24" :lg="24" :md="24" :sm="24" >
          <a-form-model-item label="跟进说明" prop="remarks">
            <a-textarea v-model="form.remarks" placeholder="跟进说明" :rows="4" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>

<script>
import moment from 'moment'
import { postAction, putAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
export default {
  name: 'XyParkFollowUpModal',
  components: {
    JDate
  },
  data() {
    return {
      title: '客户跟进',
      width: '80%',
      visible: false,
      disableSubmit: false,
      form: {},
      rules: {
        followup: [
          { required: true, message: '请输入进程', trigger: 'change' }
        ],
        followup_date: [
          { required: true, message: '请选择跟进日期', trigger: 'change' }
        ],
        plan_followup_date: [
          { required: true, message: '请选择计划下次跟进日期', trigger: 'change' }
        ],
        communicate_type: [
          { required: true, message: '请选择沟通方式', trigger: 'change' }
        ],
        remarks: [
          { required: true, message: '请填写跟进说明', trigger: 'change' }
        ]
      },
      url: {
        add: '/online/cgform/api/form/fd4c6471a4b6440baa1626a64b59fe70'
      },
      confirmLoading: false
    }
  },
  methods: {
    add(data) {
      this.form = {
        customer_code: data.customerCode,
        customer_name: data.customerName,
        probability: 50,
        followup_date: moment(new Date())
      }
      // this.$set(this.form, 'followup_date', moment(new Date()))
      this.visible = true
    },
    edit(record) {
      this.form = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.save()
        }
      })
    },
    save() {
      this.confirmLoading = true
      const data = Object.assign({}, this.form)
      data.followup_date = moment(data.followup_date).format('YYYY-MM-DD')
      data.plan_followup_date = moment(data.plan_followup_date).format('YYYY-MM-DD')
      if (data.id) {
        putAction(this.url.add, data).then(res => {
          if (res.success) {
            this.$message.success('客户记录添加成功')
            this.close()
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        postAction(this.url.add, data).then(res => {
          if (res.success) {
            this.$message.success('客户记录添加成功')
            this.close()
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      }
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
</style>
